import { Button, notification } from "antd";
import { useDispatch, useSelector } from "react-redux";
import {
  settingFileUpdate,
  userUpdate,
  onUnload,
} from "../../store/module/settingSlice";
import { avatarUpdate } from "../../store/module/loginSlice";
import request from "../../request";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { userLogout } from "../../store/module/settingSlice";

function SettingForm() {
  const [api, contextHolder] = notification.useNotification();
  const { username, password, avatar, bio } = useSelector((state) => {
    return state.setting;
  });
  const dispatch = useDispatch();
  let navigate = useNavigate();
  const settingUpdate = async (e) => {
    e.preventDefault();
    try {
      let result = await request.user.update({
        username,
        password,
        avatar,
        bio,
      });
      if (result.status == 1) {
        dispatch(userUpdate(result));
        dispatch(avatarUpdate());

        api.info({
          message: "更新成功",
          description: result.message,
          placement: "topLeft",
          duration: 2,
          onClose: () => {
            dispatch(userLogout());
            navigate("/login");
          },
        });
      } else {
        api.info({
          message: "更新失败",
          description: result.message,
          placement: "topLeft",
        });
      }
    } catch (error) {}
  };
  useEffect(() => {
    return () => {
      dispatch(onUnload());
    };
  }, []);

  return (
    <form>
      {contextHolder}
      <fieldset className="form-group">
        <input
          type="text"
          className="form-control form-control-lg"
          placeholder="用户昵称"
          disabled
          value={username}
        />
      </fieldset>
      <fieldset className="form-group">
        <input
          type="password"
          className="form-control form-control-lg"
          placeholder="用户密码"
          value={password || ""}
          onChange={(e) => {
            dispatch(
              settingFileUpdate({ key: "password", value: e.target.value })
            );
          }}
        />
      </fieldset>
      <fieldset className="form-group">
        <input
          type="text"
          className="form-control form-control-lg"
          placeholder="用户头像"
          value={avatar || ""}
          onChange={(e) => {
            dispatch(
              settingFileUpdate({ key: "avatar", value: e.target.value })
            );
          }}
        />
      </fieldset>
      <fieldset className="form-group">
        <textarea
          rows="8"
          className="form-control form-control-lg"
          placeholder="用户简介"
          value={bio || ""}
          onChange={(e) => {
            dispatch(settingFileUpdate({ key: "bio", value: e.target.value }));
          }}
        />
      </fieldset>

      <Button
        onClick={settingUpdate}
        size="large"
        color="cyan"
        variant="outlined"
        className="pull-xs-left"
      >
        更新
      </Button>
    </form>
  );
}

export default SettingForm;
